


Pesterlog Formatting+

by XxSpoopy_boyxX



Category: Homestuck
Language: English
Status: In-Progress
Published: 2020-09-13
Updated: 2020-09-13
Packaged: 2021-03-06 23:48:36
Rating: Not Rated
Warnings: No Archive Warnings Apply
Chapters: 3
Words: 1,334
Publisher: archiveofourown.org
Story URL: https://archiveofourown.org/works/26437465
Author URL: https://archiveofourown.org/users/XxSpoopy_boyxX/pseuds/XxSpoopy_boyxX
Summary: A few chapters that will teach you how to format pesterlogs in ao3. also be sure to check out sburbanite's story "How to Format Pesterlogs: A Satirical Guide" because I learned all of this through trial and error after reading their very well put together tutorial.
Kudos: 6





	1. Introduction and Basics

**Author's Note:**

  * Inspired by [How to Format Pesterlogs: A Satirical Guide](https://archiveofourown.org/works/5391818) by [sburbanite](https://archiveofourown.org/users/sburbanite/pseuds/sburbanite). 



Hello! Prince of Life here to make yours easier instead of destroying it for once! I’m writing this after reading a bunch of confusing tutorials so you don’t have to! However I would like to state that I couldn’t have done this without first having read the wonderful sburbanite’s [ _“How to Format Pesterlogs: A Satirical Guide”_ ](https://archiveofourown.org/works/5391818/chapters/12454586) and have based most of my information off of theirs. I will be informing all of you on how to add custom colors, highlighting, and more to your ao3 fics.

For this first chapter I will be realaying the basics for how to use the HTML system. While I personally write it in google docs and paste it into ao3’s “Rich Text” format then switch over to HTML so it formats it for me, it is helpful to know what the rest of the formatting can be used for.

Here’s what you will typically use in writing:

<b> \- Bold text

<i> \- Italic text

<del> \- Crossed out text

<ins> \- Underlined text

There's many more than just this of course but these are the most important ones for most writers using html. With the homestuck skin on ao3 (selectable when writing a work) we also gain access to the “span class” and “/span” commands. For example you can type:

<span class="john"> hi my name is john egbert! </span>

And it will appear as his text does in the comic. Or, alternatively you can use:

<p class="john"> hi my name is john egbert!

In order to get the same effect. An important thing to remember is that capitalizing names within the command such as using:

<span class="John"> hi my name is john egbert! </span>

Will not change the formatting (unless otherwise stated in the code). When working properly you text will appear like this: 

hi my name is john egbert! 

In the next chapter we will cover how to make your custom homestuck ao3 skin and give yourself custom colors and much more.


	2. Customization

**Summary for the Chapter:**

> How to customize you colors and more.

This will be a lot more in-depth than the previous one and will cover how to customize your homestuck pesterlogs with new colors and highlighting (as well as a few bonus surprises) so this can be skipped if you would like to go straight to the cheat sheet.

Ok so your first step to getting customization is to completely copy and paste the one from the ao3 website that’s already written. Paste all of it in somewhere where it’s easy to edit and have saved for later (I use google docs). So now you see a bunch of commands that look like this:

#workskin .rose {

font-size: 14px;

font-weight: bold;

font-family: courier, monospace;

color: #b536da;

}

Keep in mind that you can set several different titles to one skin such as for Nepeta/Meulin’s color:

#workskin .nepeta,

#workskin .meulin {

font-size: 14px;

font-weight: bold;

font-family: courier, monospace;

color: #416600;

}

Alright time to butcher code. For this example I will be making a pesterchum for Midoriya Izuku. First off copy and paste someone’s code here and change the workskin title to whatever you want for example:

#workskin .midoriya {

There we go. Nice and simple. I can also set it up as so:

#workskin .midoriya

#workskin .izuku

#workskin .deku {

Now both will change the text color and the rest. The next section is the font size and this can be manipulated by changing the number. Real simple. Midoriya is a bit on the quieter side sometimes so let's just say for the purpose of an example that he will talk in font size 11.

#workskin .midoriya

#workskin .izuku {

font-size: 11px;

Nicely done me. Good work. For the next two (font weight and font family) you don't really need to mess with, however you  _ can _ remove them and type in just a different color. This could be something fun for fics with Ult Dirk where he controls the text in the narrative. It would be set up as:

#workskin .dirk {

font-size: 14px;

color: #f2a400;

}

And that text would look like this 

And last but probably most if I’m being honest: changing the text color. You can do this by inputting a text code into the last section (font color) like this:

#workskin .midoriya,

#workskin .izuku {

font-size: 11px;

font-weight: bold;

font-family: courier, monospace;

color: #21ff21;

}

And it’s finished! An important note here is that you can use capitals or lowercase in the hex code and it won't matter. So now once you import the new code you can use this new command.

<span class="midoriya"> My name is Midoriya Izuku, also known as Pro Hero Deku! </span>

<span class="izuku"> My name is Midoriya Izuku, also known as Pro Hero Deku! </span>

<span class="deku"> My name is Midoriya Izuku, also known as Pro Hero Deku! </span>

And should look like:

My name is Midoriya Izuku, also known as Pro Hero Deku! 

Any of those will work if you have set it up like I have. Now to import your code. An important note is to input both your new code, and all the old Homestuck formatting code (unless you just don’t want to use any colors besides custom ones).

You can also add a highlight to the back of your text such as in one of Doc Scratch’s codes:

#workskin .scratch-green {

font-size: 14px;

font-weight: bold;

font-family: courier, monospace;

color: #ffffff;

background-color: #1f9400;

}

  1. Go to your Dashboard
  2. Click on “Skins”
  3. Click “My Work Skins”
  4. Click “Create Work Skin”
  5. Give a title and description so you can keep track of it
  6. Input code
  7. Upload



And there you go! It’s now uploaded. Just select the skin when you’re on your work and you can use all sorts of new formatting! Now onto the cheat sheet.


	3. The Almighty Cheat-Sheet of Life

**Summary for the Chapter:**

> Every single text option available without editing is at your fingertips.

_ Pesterlog Text: _

<span class="pesterlog"> began/ceased pestering/trolling </span>

_ John’s Blue: _

<span class="john">

<span class="tavrisprite">

_ Jane’s Blue: _

<span class="Jane">

<span class="nannasprite">

_ Jade’s Green: _

<span class="jade">

<span class="erisolsprite">

_ Jake’s Green: _

<span class="jadesprite">

<span class="jake">

_ Dave’s Red: _

<span class="AR">

<span class="dave">

<span class="ARquiusprite">

_ Dirk’s Orange: _

<span class="bro">

<span class="davesprite">

<span class="dirk">

<span class="strider">

  
  


_ Rose’s Purple: _

<span class="rose">

_ Roxy’s Pink: _

<span class="jaspersprite">

<span class="mom">

<span class="roxy">

_ Rustblood: _

<span class="aradia">

**A/N: For some reason Damara is the only dancestor without a pesterlog text set up so you just have to use aradia’s or code it in yourself with the same color. Aradia’s has the same color anyways so you do you.**

_ Bronzeblood: _

<span class="tavros">

<span class="rufioh">

_ Goldblood: _

<span class="sollux">

<span class="mituna">

_ Candy-redblood: _

<span class="athred">

<span class="kankri">

<span class="altkarkat">

_ Karkat’s Grey: _

<span class="karkat">

_ Oliveblood: _

<span class="nepeta">

<span class="meulin">

_ Jadeblood: _

<span class="kanaya">

<span class="porrim">

_ Tealblood: _

<span class="terezi">

<span class="latula">

_ Ceruleanblood: _

<span class="vriska">

<span class="areana">

_ Indigoblood: _

<span class="equius">

<span class="horuss">

_ Purpleblood: _

<span class="gamzee">

<span class="kurloz">

  
  


_ Violetblood: _

<span class="eridan">

<span class="cronus">

  
  


_ Fushiablood: _

<span class="feferi">

<span class="meenah">

_ Caliborn: _

_ (Grey) _

<span class="undyingumbrage">

<span class="caliborn">

_ (Green) _

<span class="felt">

<span class="altcaliborn">

<span class="lordenglish">

_ Calliope: _

_ (Grey) _

<span class="uu">

<span class="uranianumbra">

<span class="calliope">

**A/N AltCalliope also did not receive a pesterlog text code so code it yourself or use the candy-red**

_ Miscellaneous: _

<span class="scratch"> **(white text white background)**

<span class="scratch-white"> **(white text white background)**

<span class="scratch-green"> **(white text green background)**

<span class="dad"> **(grey in between karkat and caliborn)**

<span class="pipefan413"> **(grey in between karkat and caliborn)**

<span class="exile"> **(white text black background)**

<span class="athblue"> **(basically indistinguishable from john but different enough to count)**

That's all for now but i will post a new chapter once I figure out how to use the boxes some writers on here have theirs in.

Once again I must give a big thank you to sburbanite because without learning from their guide this wouldn’t be possible. Be sure to comment if you find ant problems because I wrote all of this after midnight and I’m sleepy.


End file.
